<template>
  <div class="bag">
    <div class="store-wrap">
      <div class="header">
        <div class="lbm" @click="handleLbm">礼包码</div>

        <top-bar :barObj="barObj"/>
        <div class="tab">
          <div class="arrow-up"></div>
          <ul>
            <li>
              <img src="./img/Treasure chest_11.png" alt>
              <span>章鱼宝箱</span>
            </li>
            <li>
              <img src="./img/Treasure chest_22.png" alt>
              <span>以太宝箱</span>
            </li>
            <li>
              <img src="./img/Treasure chest_33.png" alt>
              <span>比特宝箱</span>
            </li>
          </ul>
        </div>
        <div class="content" v-if="listData.value3 !='2'">
          <p class="title">更多商品</p>
          <ul>
            <li :class="liClass">
              <div class="down_time" v-if="listData.value3=='0'">{{remain}}</div>
              <div class="left_li" @click="seeDetail">
                <img :src="listData.value5" alt>
                <div class="txt">
                  <p class="p1">{{listData.value2}}</p>
                  <p class="p2">{{listData.value7}}</p>
                  <p class="p3">￥{{parseInt(listData.value6).toFixed(0)}}会员免费领取</p>
                </div>
              </div>
              <div class="right_li" v-if="listData.value3=='0'" @click="seeDetail">
                <span v-if="msec <= 0">点击领取</span>
                <span v-else>不可领取</span>
              </div>
              <div class="right_li" v-else-if="listData.value3=='3'">已支付</div>
              <div class="right_li" v-else @click="tapAndPay">点击领取</div>
            </li>
          </ul>
        </div>
        <div v-else class="ylq">已领取</div>
      </div>
    </div>
    <bag-address :id="listData.value1" v-if="addressPage"/>
    <bag-pay v-if="bagPayPage"/>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import { bagList } from "../../api";
import { getGuid } from "../../utils/index";
import bagAddress from "./com/bagAddress";
import bagPay from "./com/bagPay";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "bag",
  components: {
    topBar,
    bagAddress,
    bagPay
  },
  computed: {
    ...mapGetters(["bagPayPage", "addressPage"]),
    liClass() {
      if (this.msec <= 0) {
        return "yes_li";
      } else if (this.listData.value3 == "0") {
        return "no_li";
      } else {
        return "yes_li";
      }
    }
  },
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "我",
        title: "背包",
        isIcon: true
      },
      remain: "",
      countDownTimer: null,
      listData: {},
      msec: ""
    };
  },
  mounted() {
    this.getBagList();
  },
  methods: {
    ...mapActions(["isShowAddress", "isShowbagPay"]),
    handleLbm() {
      console.log("1");
      this.$router.push("/giftBag");
    },
    getBagList() {
      bagList({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.Success) {
          this.listData = res.data.EntityList[0];
          if (this.listData.value3 == "0") {
            this.countDown();
          }
          if (this.listData.value3 == "3") {
            this.isShowAddress();
          }
        }
      });
    },
    //倒计时
    countDown() {
      //目标时间  //value4 + 一年
      let targetTime = new Date(this.listData.value4);
      targetTime.setFullYear(targetTime.getFullYear() + 1);
      //当前时间 - 开始时间
      this.msec = targetTime - +new Date();
      // 计算时分秒数
      let day = parseInt(this.msec / 1000 / 60 / 60 / 24);
      let hr = parseInt((this.msec / 1000 / 60 / 60) % 24);
      let min = parseInt((this.msec / 1000 / 60) % 60);
      let sec = parseInt((this.msec / 1000) % 60);
      hr = hr > 9 ? hr : "0" + hr;
      min = min > 9 ? min : "0" + min;
      sec = sec > 9 ? sec : "0" + sec;

      this.remain = `剩：${day}天${hr}小时${min}分`;
      if (this.msec <= 0) {
        this.remain = "";
      }
      // 一秒后递归
      this.countDownTimer = setTimeout(() => {
        this.countDown();
      }, 1000);
    },
    tapAndPay() {
      if (this.listData.value3 == "3") {
        return;
      }
      this.isShowbagPay();
    },
    seeDetail() {
      this.$router.push("/bagDetail");
    }
  },
  destroyed() {
    clearTimeout(this.countDownTimer);
  }
};
</script>
<style lang="stylus" scoped>
.bag {
  width: 7.5rem;
  height: 100%;
  position: relative;

  .ylq {
    text-align: center;
    margin: 0.2rem auto;
  }

  .store-wrap {
    position: relative;

    .header {
      padding-top: 0.52rem;
      box-sizing: border-box;
      height: 2.38rem;
      background: url('./img/bag_btm.png');
      background-size: 100% 100%;
      position: relative;

      .lbm {
        width: 1rem;
        height: 0.4rem;
        line-height: 0.4rem;
        position: absolute;
        right: 5px;
        top: 27px;
        font-size: 14px;
        z-index: 999;
        color: #fff;
      }

      .tab {
        width: 7.1rem;
        height: 1.79rem;
        background: #fff;
        border-radius: 0.2rem;
        margin: 0.5rem auto 0 auto;
        position: relative;

        .arrow-up {
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 8px solid #fff;
          position: absolute;
          top: -8px;
          left: 50%;
          transform: translateX(-50%);
        }

        ul {
          width: 100%;
          display: flex;
          justify-content: space-around;
          text-align: center;

          li {
            height: 1.79rem;
            margin: 0 0.1rem;
            width: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;

            span {
              color: #666;
              font-size: 12px;
            }

            img {
              width: 100%;
              height: 1rem;
              margin: 10px 0 4px 0;
            }
          }
        }
      }
    }

    .content {
      width: 7.1rem;
      // height: 8rem;
      // background: pink;
      margin: 10px auto;

      .title {
        font-size: 17px;
        color: rgba(61, 59, 69, 1);
        line-height: 35px;
        font-weight: 500;
      }

      ul {
        li {
          height: 2.37rem;
          background: #FFF;
          border-radius: 0.2rem;
          margin-bottom: 0.14rem;
          display: flex;
          position: relative;

          .left_li {
            flex: 1;

            img {
              width: 1.72rem;
              height: 1.64rem;
              position: absolute;
              left: 0.3rem;
              top: 0.5rem;
            }

            .txt {
              width: 2.68rem;
              height: 100%;
              position: absolute;
              left: 2.1rem;
              top: 0rem;
              padding: 25px 0;
              text-align: center;
              box-sizing: border-box;
              color: rgba(102, 102, 102, 1);

              p {
                line-height: 25px;
              }

              .p1 {
                font-size: 15px;
              }

              .p2 {
                font-size: 10px;
              }

              .p3 {
                font-size: 10px;
                display: inline-block;
                min-width: 1.52rem;
                min-width: 0.25rem;
                background: url('./img/price_btm.png');
                background-size: 100% 100%;
                color: #FFF;
                padding: 0 3px;
                box-sizing: border-box;
                font-size: 9px;
              }
            }
          }

          .right_li {
            width: 2.27rem;
            flex: 0 1 2.27rem;
            line-height: 2.37rem;
            text-align: center;
            color: rgba(255, 255, 255, 1);
            font-size: 17px;
          }

          .down_time {
            width: 2.42rem;
            line-height: 0.41rem;
            color: #FFF;
            font-size: 9px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
          }
        }

        .yes_li {
          background: #fff url('./img/yes_li.png');
          background-size: 100% 100%;
        }

        .no_li {
          background: #fff url('./img/notreceive_btm.png');
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>

